<template>
    <div id="mapContainer"></div>
</template>
  
<script setup>
import { onMounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader'

// const dataSource = [{
//     lng: 121.473667,
//     lat: 31.230525,
// }]

let map = undefined;

const initMap = () => {
    AMapLoader.load({
        key: '05497d6de5c1d12b6a165644e05a10cf', // 申请好的Web端开发者Key，首次调用 load 时必填
        // key: 'e0d285f291481d84082aaa49a43de5d2',
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.MarkerClusterer', 'AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation', 'AMap.DistrictSearch', 'AMap.GeoJSON',], // 需要使用的的插件列表，如比例尺'AMap.Scale'等


    })
        .then(AMap => {
            findMask(AMap);
        })
        .catch(e => {
            console.log(e)
        })
}

const findMask = (AMap) => {

    const district = new AMap.DistrictSearch({ subdistrict: 0, extensions: 'all', level: 'district' });
    const result = district.search('蒲县', function (status, result) {
        // 查询成功时，result即为对应的行政区信息
        console.log('DistrictSearc result', result) // 这里是整个郑州市的边界经纬度
        console.log('DistrictSearc result boundaries', result.districtList[0].boundaries) // 这里是整个郑州市的边界经纬度
        const bounds = result.districtList[0].boundaries

        const mask = []
        for (let i = 0; i < bounds.length; i++) {
            mask.push([bounds[i]])
        }

        setupMap(AMap, mask);
    });


}

const setupMap = (AMap, mask) => {
    console.log('setupMap result', mask) // 这里是整个郑州市的边界经纬度

    var map = new AMap.Map('mapContainer', {
        // mask: mask, // 为Map实例制定掩模的路径,各图层将值显示路径范围内图像,3D模式下有效
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 12, //初始化地图层级
        center: [111.096439, 36.411827], //初始化地图中心点
        // pitch: 60,
        // rotation: -35,
        // features: ['bg', 'road'],s
        // mapStyle: 'amap://styles/grey',
        mapStyle: 'amap://styles/b7c9e8d817a8886ad7a0ceec47cd7026',
        // layers: [
        //     new AMap.TileLayer(),//高德默认标准图层
        //     // 高德默认标准图层
        //     // new AMap.TileLayer.Satellite(),
        //     // 楼块图层
        //     new AMap.Buildings({
        //         zooms: [16, 18],
        //         zIndex: 10,
        //         heightFactor: 2//2倍于默认高度，3D下有效
        //     })
        // ]
    });

    let markers = []
    console.log('points = ', points)
    for (var i = 0; i < points.length; i += 1) {
        markers.push(new AMap.Marker({
            position: points[i]['lnglat'],
            content: '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
            offset: new AMap.Pixel(-15, -15)
        }))
    }


    var styles = [
        {
            url: "https://a.amap.com/jsapi_demos/static/images/green.png",
            size: new AMap.Size(32, 32),
            offset: new AMap.Pixel(-16, -16),
            // textColor: '#FFFFFF',
        },
        {
            url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
            size: new AMap.Size(36, 36),
            offset: new AMap.Pixel(-18, -18),
            // textColor: '#FFFFFF',
        },
        {
            url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
            size: new AMap.Size(48, 48),
            offset: new AMap.Pixel(-24, -24),
            textColor: '#FFFFFF',
        }
    ];

    const cluster = new AMap.MarkerClusterer(map, markers, {
        gridSize: 80, styles: styles,
    });
    map.add(cluster);

    cluster.setMap(map);

    // var trafficLayer = new AMap.TileLayer.Traffic({
    //     mask: mask, // 为Map实例制定掩模的路径,各图层将值显示路径范围内图像,3D模式下有效
    //     zIndex: 11
    // });

    // var roadNetLayer = new AMap.TileLayer.RoadNet({
    //     mask: mask, // 为Map实例制定掩模的路径,各图层将值显示路径范围内图像,3D模式下有效
    //     zIndex: 10
    // });


    // var layerGroup = new AMap.LayerGroup([roadNetLayer]);
    // layerGroup.setMap(map);


    // let polygons = [];
    // if (mask) {
    //     for (var i = 0, l = mask.length; i < l; i++) {
    //         //生成行政区划polygon
    //         var polygon = new AMap.Polygon({
    //             strokeWeight: 1,
    //             path: mask[i],
    //             fillOpacity: 0.05,
    //             fillColor: '#80d8ff',
    //             strokeColor: '#0091ea'
    //         });
    //         polygons.push(polygon);
    //     }
    // }
    // map.add(polygons)
    // console.log('setupMap polygons', polygons)
    // map.setFitView(polygons);//视口自适应


    // var layer = new AMap.LabelsLayer({
    //     rejectMapMask: true,
    //     // 开启标注避让，默认为开启，v1.4.15 新增属性
    //     collision: true,
    //     // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
    //     animation: true,
    // });

    // map.add(layer);
    // loadRoads(map);

}


const loadRoads = (map) => {
    // 加载GeoJSON数据
    fetch("http://101.43.245.18:8082/road.txt")
        .then((response) => response.json())
        .then((geoJSONData) => {
            // 将GeoJSON数据添加到地图上
            const roadLayer = new AMap.GeoJSON({
                geoJSON: geoJSONData,
                getPolygon: (feature, coords) => {
                    return new AMap.Polygon({
                        path: coords,
                        strokeColor: "#0000FF",
                        strokeWeight: 2,
                    });
                },
            });

            map.add(roadLayer);
        });
}
onMounted(() => {
    console.log('hihihi')
    setTimeout(() => {
        initMap();
    }, 1000)
})

</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
    margin: 40px 0 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}

#mapContainer {

    height: 100vh;
    width: 100vw;
    /* height: 800px;
    width: 1000px; */
}
</style>
  